<template>
  <div class="sorterList">
    <div class="buttons">
      <el-button type="primary" @click="createForm('create')">新增</el-button>
    </div>
    <el-tree
      :data="treeDate.data"
      node-key="id"
      accordion
      @node-expand="nodeExpand"
      highlight-current
      :props="props"
      :expand-on-click-node="false"
      :render-content="renderContent"
    >
    </el-tree>
    <VForm :title="title" v-if="dialogVisible" moduleName="sorter">
      <template v-if="dialogModle==='sorter'">
        <Sorter :ruleForm="ruleForm" :formType="formType" :getTreeData="getTreeData"></Sorter>
      </template>
    </VForm>
  </div>
</template>
<script>
  // import VTree from '../../components/Vtree.vue'
  import VForm from '../../components/VForm'
  import Sorter from './Sorter.vue'
  import axios from 'axios'
  import api from '../../store/api'
  import {mapState, mapGetters} from 'vuex'
  import * as types from '../../store/mutations-type'
  export default {
    data () {
      return {
        title: '新建',
        currentPage: 1,
        limit: 20,
        status: true,
        listLoading: false,
        id: '',
        dialogModle: '',
        ruleForm: {
          sort: '',
          mobileTitle: '',
          mobileIcon: '',
          isShow: '1',
          categoryDeeper: '',
          id: [],
          cateText: ''
        },
        formType: 'create',
        props: {
          label: 'categoryName',
          children: 'child'
        },
        subLevel: 0,
        threeLevel: 0
      }
    },
    components: {
      // VTree,
      VForm,
      Sorter
    },
    methods: {
      renderContent: function (createElement, {node, data, store}) {
        return createElement('span', [
          createElement('span', node.label),
          createElement('span', {
            attrs: {
              style: 'float: right; margin-right: 20px'
            }
          }, [
            createElement('el-button', {
              attrs: {
                size: 'mini'
              },
              on: {
                click: () => {
                  this.data = data
                  this.dialogModle = 'sorter'
                  this.title = '修改'
                  this.formType = 'update'
                  this.getSort()
                }
              }
            }, '修改'),
            createElement('el-button', {
              attrs: {
                size: 'mini',
                type: 'danger'
              },
              on: {
                click: () => {
                  this.data = data
                  this.removeForm()
                }
              }
            }, '删除')
          ])
        ])
      },
      createForm (handle) {
        this.formType = handle
        this.dialogModle = 'sorter'
        if (handle === 'update') {
          this.title = '修改'
          this.getSort()
        } else {
          this.$store.dispatch(types.SORTER_SHOW_FORM)
          this.title = '新建'
          this.ruleForm = {
            sort: '',
            mobileTitle: '',
            mobileIcon: '',
            isShow: '1',
            categoryDeeper: '',
            id: []
          }
        }
      },
      nodeExpand (item, node) {
        if (node.level === 1) {
          axios.get(api.sorterList + '?parentId=' + item.id)
            .then(response => {
              var array = response.data.data.map((item, index) => {
                return Object.assign({}, response.data.data[index], {child: [{}]})
              })
              let data = Object.assign({}, response.data, {data: array})
              response = Object.assign({}, response, {data: data})
              this.treeDate.data.map((obj, index) => {
                if (obj.id === item.id) {
                  this.subLevel = index
                  return
                }
              })
              this.treeDate.data[this.subLevel].child = response.data.data
            })
        } else if (node.level === 2) {
          axios.get(api.sorterList + '?parentId=' + item.id)
            .then(response => {
              var array = response.data.data.map((item, index) => {
                return Object.assign({}, response.data.data[index], {child: []})
              })
              let data = Object.assign({}, response.data, {data: array})
              response = Object.assign({}, response, {data: data})
              this.treeDate.data[this.subLevel].child.map((obj, index) => {
                if (obj.id === item.id) {
                  this.threeLevel = index
                  return
                }
              })
              this.treeDate.data[this.subLevel].child[this.threeLevel].child = response.data.data
            })
        }
      },
      /**
       * 选中行处理
       * @param selection //总共选中行
       * @param row // 选中行
       */
      getTreeData () {
        this.$store.dispatch(types.SORTER_REQ_LIST, '?parentId=1')
      },
      getSort () {
        axios.get(api.getCategory + '/' + this.data.id)
          .then(response => {
            const result = response.data
            if (result.success) {
              this.ruleForm.id = [result.data.id]
              this.ruleForm.sort = result.data.sort
              this.ruleForm.mobileTitle = result.data.mobileTitle
              this.ruleForm.mobileIcon = result.data.mobileIcon
              this.ruleForm.isShow = result.data.isShow.toString()
              this.ruleForm.categoryDeeper = result.data.categoryDeeper
              this.ruleForm.cateText = result.data.parentNames
              this.$store.dispatch(types.SORTER_SHOW_FORM)
              console.log(this.ruleForm)
            }
          })
      },
      /**
       * 删除操作
       */
      removeForm () {
        var ids = this.data.id.toLocaleString()
        this.$confirm('确认删除选中记录吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          let para = ids
          axios.delete(api.categoryDelete + '?ids=' + para).then((response) => {
            var result = response.data
            if (result.success) {
              this.listLoading = false
              this.$message({
                message: '删除成功',
                type: 'success'
              })
            } else {
              this.$message.error({
                title: '错误',
                message: result.message
              })
            }
            this.getTreeData()
          }, (err) => {
            this.$message.error({
              title: '错误',
              message: err.response.data.message
            })
            this.listLoading = false
          })
        })
      },
      /**
       * 表单初始化
       */
      initFormData () {
        for (var i in this.ruleForm) {
          this.ruleForm[i] = ''
        }
      }
    },
    computed: {
      ...mapState({
        dialogVisible: state => state.sorter.dialogVisible,
        checkNum: state => state.sorter.checkNum
      }),
      ...mapGetters({
        treeDate: 'sorter_treeDate'
      })
    },
    mounted () {
      this.getTreeData()
    }
  }
</script>
<style>
  .sorterList {
    font-size: 14px;
  }
</style>
